<template>
  <el-card>
    <el-button @click="$router.push('/goods/add')" type="primary" icon="el-icon-circle-plus-outline">新增</el-button>
    <el-divider></el-divider>
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="id" label="ID" min-width="50"></el-table-column>
      <el-table-column prop="firstcatename" label="一级分类" min-width="80"></el-table-column>
      <el-table-column prop="secondcatename" label="二级分类" min-width="80"></el-table-column>
      <el-table-column prop="goodsname" label="商品名称" min-width="120"></el-table-column>
      <el-table-column prop="img" label="商品图片" min-width="120">
        <template v-slot="scope">
          <el-image :src="$imgBaseUrl+scope.row.img" :style="{width:'100px'}"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="商品价格" min-width="120">
          <template v-slot="scope">
              <span style="color:red">&yen;{{scope.row.price}}</span>
          </template>
      </el-table-column>
      <el-table-column prop="market_price" label="市场价格" min-width="120">
          <template v-slot="scope">
              <span style="color:red">&yen;{{scope.row.market_price}}</span>
          </template>
      </el-table-column>
      <el-table-column prop="isnew" label="是否新品" min-width="120">
        <template v-slot="scope">
          <!--  active-color: 激活状态的颜色
                    inactive-color: 未激活的颜色
                    active-value: 激活状态的值
                    inactive-value:未激活状态的值
          -->
          <el-tooltip :content="scope.row.isnew==1?'是':'否'" placement="top">
            <el-switch
              @change="updateState(scope.row,'isnew')"
              v-model="scope.row.isnew"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
            ></el-switch>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="ishot" label="是否热卖" min-width="120">
        <template v-slot="scope">
          <el-tooltip :content="scope.row.ishot==1?'是':'否'" placement="top">
            <el-switch
              @change="updateState(scope.row,'ishot')"
              v-model="scope.row.ishot"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
            ></el-switch>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" min-width="120">
        <template v-slot="scope">
          <el-tag type="success" v-if="scope.row.status==1">正常</el-tag>
          <el-tag type="error" v-else>禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="100" fixed="right">
        <template v-slot="scope">
          <el-button @click="$router.push('/goods/'+scope.row.id)" type="primary" circle icon="el-icon-edit" size="mini"></el-button>
          <el-button @click="del(scope.row.id)" type="danger" circle icon="el-icon-delete" size="mini"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :page-size="size"
      :page-sizes="[1,2,5,10,15]"
      layout="sizes,prev, pager, next"
      :total="total"
      @current-change="pageChange"
      @size-change="sizeChange"
    ></el-pagination>
  </el-card>
</template>

<script>
import { getGoodsList, getTotal, updateGoodsInfo } from "../../request/goods";
export default {
  data() {
    return {
      // 商品列表
      list: [],
      // 页码
      page: 1,
      // 每一页展示的数据条数
      size: 5,
      // 数据总条数
      total: 0
    };
  },
  methods: {
    // 删除商品
    del(id){
      this.$myConfirm(async ()=>{
        // 1-请求数据接口,删除服务端的数据
        const res=await this.$http.post('/api/goodsdelete',{id});
        // 2-更新视图
        if(res.code==200){
            const index=this.list.findIndex(item=>item.id==id);
            this.list.splice(index,1);
            this.$success('删除成功');
        }else{
          this.$error('删除失败');
        }
      });
    },
    //   更新状态(isnew,ishot)
    async updateState(info, attr) {
      let postData = { id: info.id };
      postData[attr] = info[attr];
      const res = updateGoodsInfo(postData);
      if (res) {
        this.$success("更新成功");
      } else {
        this.$error("更新失败");
      }
    },
    // 获取商品列表
    async getList() {
      const list = await getGoodsList({ page: this.page, size: this.size });
      if (list) {
        // 更新数据
        this.list = list;
      }
    },
    // 监听页码page的更新
    pageChange(page) {
      // 1-更新page
      this.page = page;
      // 2-重新请求商品列表
      this.getList();
    },
    // 监听size的更新
    sizeChange(size) {
      // 1-更新size
      this.size = size;
      // 2-重新请求商品列表
      this.getList();
    }
  },
  async created() {
    this.getList();
    // 更新数据总条数
    this.total = await getTotal();
  }
};
</script>

<style>
</style>